﻿
@{
    ViewBag.Title = "CreateUser";
    Layout = "~/Views/Shared/_LayoutAdmin.cshtml";
}

<style>
    .col-md-3 {
        width: 20%;
    }

    .margin-bottom-15 {
        margin-bottom: 10px;
    }
</style>

<div id="myModal" class="modal fade" style="">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- dialog body -->
            <div class="modal-body">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <span style="color: #BB4945;"></span>
            </div>
            <!-- dialog buttons -->
            <div class="modal-footer"><button type="button" class="btn btn-primary btnOK">OK</button></div>
        </div>
    </div>
</div>

<div>
    <div class="container">
        <div id="signupbox" style="margin-top:50px; width: 70%;" class="mainbox col-md-6 col-sm-8 col-sm-offset-2">
            <div class="panel panel-info">
                <div class="panel-heading">
                    <div class="panel-title">Create new account</div>
                </div>
                <div class="panel-body">
                    <form class="form-horizontal" role="form">

                        <div class="form-group">
                            <label for="email" class="col-md-3 control-label" style="width: 18.6%;">Username</label>
                            <div class="col-md-9" style="width: 77.6%;">
                                <input type="text" class="form-control" name="Username" id="Username" placeholder="Username">
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="email" class="col-md-3 control-label" style="width: 18.6%;">Password</label>
                            <div class="col-md-9" style="width: 77.6%;">
                                <input type="text" class="form-control" name="Password" id="Password" placeholder="Password">
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-md-12" style="width: 100%;">
                                <hr />
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="firstname" class="col-md-3 control-label" style="width: 18.6%;">First Name</label>
                            <div class="col-md-9" style="width: 77.6%;">
                                <input type="text" class="form-control" name="FirstName" id="FirstName" placeholder="First Name">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="lastname" class="col-md-3 control-label" style="width: 18.6%;">Last Name</label>
                            <div class="col-md-9" style="width: 77.6%;">
                                <input type="text" class="form-control" name="LastName" id="LastName" placeholder="Last Name">
                            </div>
                        </div>
                        <div class="col-md-6 margin-bottom-15">
                            <label for="email" class="col-md-4 control-label">Email</label>
                            <div class="col-md-8">
                                <input type="text" class="form-control" name="Email" id="Email" placeholder="Email Address">
                            </div>
                        </div>

                        <div class="col-md-6 margin-bottom-15">
                            <label for="icode" class="col-md-4 control-label">Street</label>
                            <div class="col-md-8">
                                <input type="text" class="form-control" name="Street" id="Street" placeholder="Street">
                            </div>
                        </div>
                        <div class="col-md-6 margin-bottom-15">
                            <label for="icode" class="col-md-4 control-label">City</label>
                            <div class="col-md-8">
                                <input type="text" class="form-control" name="City" id="City" placeholder="City">
                            </div>
                        </div>
                        <div class="col-md-6 margin-bottom-15">
                            <label for="icode" class="col-md-4 control-label">State</label>
                            <div class="col-md-8">
                                <input type="text" class="form-control" name="State" id="State" placeholder="State">
                            </div>
                        </div>
                        <div class="col-md-6 margin-bottom-15">
                            <label for="icode" class="col-md-4 control-label">ZipCode</label>
                            <div class="col-md-8">
                                <input type="text" class="form-control" name="ZipCode" id="ZipCode" placeholder="Zip Code">
                            </div>
                        </div>
                        <div class="col-md-6 margin-bottom-15">
                            <label for="icode" class="col-md-4 control-label" style="padding-left: 0;">CreditCardNo</label>
                            <div class="col-md-8">
                                <input type="text" class="form-control" name="CreditCardNo" id="CreditCardNo" placeholder="Credit Card No">
                            </div>
                        </div>
                        <div class="col-md-6 margin-bottom-15">
                            <label for=" icode" class="col-md-4 control-label" style="padding-left: 0;">
                                ExpirationDate
                            </label>
                            <div class="col-md-8">
                                <input type="text" class="form-control" name="ExpirationDate" id="ExpirationDate" placeholder="ExpirationDate">
                            </div>
                        </div>
                        <div class="col-md-6 margin-bottom-15">
                            <label for=" icode" class="col-md-4 control-label">
                                CVS
                            </label>
                            <div class="col-md-8">
                                <input type="text" class="form-control" name="CVS" id="CVS" placeholder="CVS">
                            </div>
                        </div>

                        <div class="form-group">
                            <!-- Button -->
                            <div class="col-md-12 text-right" style="padding-right: 6%;">
                                <button id="btn-create" type="button" class="btn btn-info"><i class="icon-hand-right"></i>Create</button>
                                <button id="btn-reset" type="button" class="btn btn-info"><i class="icon-hand-right"></i>Reset</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>


        </div>
    </div>

</div>

<script>
    $(function () {
        function checkedDataRegistration() {
            var flag = true;
            if (!$.trim($('#Username').val())) {
                $('#Username').attr('placeholder', 'Username is required');
                flag = false;
            }
            if (!$.trim($('#Password').val())) {
                $('#Password').attr('placeholder', 'Pasword is required');
                flag = false;
            }
            if (!$.trim($('#FirstName').val())) {
                $('#FirstName').attr('placeholder', 'Pasword is required');
                flag = false;
            }
            if (!$.trim($('#LastName').val())) {
                $('#LastName').attr('placeholder', 'Pasword is required');
                flag = false;
            }
            return flag;
        }

        $('#btn-create').click(function () {
            if (checkedDataRegistration()) {
                var data = {
                    'username': $('#Username').val(), 'password': $('#Password').val(), 'confirmPassword': $('#Password').val(), 'email': $('#Email').val(),
                    'firstName': $('#FirstName').val(), 'lastName': $('#LastName').val(), 'street': $('#Street').val(), 'city': $('#City').val(), 'state': $('#State').val(),
                    'zipCode': $('#ZipCode').val(), 'creditCardNo': $('#CreditCardNo').val(), 'expirationDate': $('#ExpirationDate').val(), 'cvs': $('#CVS').val()
                };
                $.ajax({
                    url: '@Url.Content("~/Home/RegistrationForUser/")',
                    type: 'POST',
                    data: JSON.stringify(data),
                    dataType: 'json',
                    contentType: 'application/json; charset=utf-8',
                    success: function (response) {
                        //$("#myModal").modal('show').html("Created Account is successfull");
                        alert('Created Account is successfull');
                        window.location.href = '@Url.Content("~/Admin/Index?UserId=")' + '@ViewBag.UserId' + '&UserName=@ViewBag.UserName';
                    }
                });
            }
        });

        $('#btn-reset').click(function () {
            $('form input').val('');
        });
    });
    
</script>